//剪裁插件使用步骤
//1.初始化 --> 得到剪裁框
let image = $('#image')
let option = {
  // 约束剪裁比例 1:1
  aspectRatio: 1,
  // 指点预览区域
  preview: '.img-preview'
}
image.cropper(option)
//2.调用方法
// 剪裁插件的方法语法: image.cropper('方法名',........方法的参数)


// 3.点击上传触发文件域的上传事件
$('#uploading').on('click', function () {
  //触发文件域的点击事件
  $('#file').trigger('click')
})

// 4.文件域内容改变,更换剪裁区图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    //获取文件对象
    let fileObj = this.files[0]
    //创建url
    let url = URL.createObjectURL(fileObj)
    //更换剪裁区图片
    image.cropper('replace', url)
  }
})

// 5.点击确定,剪裁图片,转换格式,ajax提交
$('#confirm').on('click', function () {
  // 调用插件的语法剪裁
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
  // 转成 base64 格式
  let str = canvas.toDataURL()
  //提交这个 base64 格式的字符串给接口
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: str },
    success: function (res) {
      layer.msg(res.message)
      if (res.status === 0) {
        window.parent.getUserinfo()
      }
    }
  })
})